<template>
  <div class="wrapper">
    <div class="flex">
      <template v-if="province">
        <a :href="`/policyNotice/${province}/${city}`"></a>
        <a :href="`/governmentUnscramble/${province}/${city}`"></a>
        <a :href="`/newsInfomation/${province}/${city}`"></a>
      </template>
      <template v-else>
        <a :href="`/policyNotice`"></a>
        <a :href="`/governmentUnscramble`"></a>
        <a :href="`/newsInfomation`"></a>
      </template>
    </div>
    <div class="mindWidth wrapper_main">
      <div class="mindWidth_L">
        <ul>
          <li class="changeHanld">
            <img class="login" src="../static/image/login/logo.png" alt @click="$router.push('/')" />
          </li>
          <li
            v-if="showHandClass"
            :class="[showHandClass?'changeHanld location':'location']"
            @click="showModalBox"
          >
            <i class="el-icon-location-outline"></i>
            {{ cureentCity }}
          </li>
          <li
            v-else
            :class="[showHandClass?'changeHanld location':'location']"
            @click="showModalBox"
          >
            <i class="el-icon-location-outline"></i>
            {{ cureentCity }}站
          </li>
          <li
            style="width:120px;text-align:center;display:inline-block;line-height: 60px;"
            @click="$router.push('/')"
          >首页</li>
          <li class="menuBar">
            <el-menu
              mode="horizontal"
              background-color="transparent"
              text-color="#000"
              router
              @select="handleSelect"
              v-for="(item, index) in homeNavigationMenuInfo"
              :key="index"
            >
              <el-submenu v-if="item.whetherChild === 1" index="1">
                <template #title>{{ item.title }}</template>
                <el-menu-item
                  v-for="(v, i) in item.children"
                  :key="i"
                  :index="`${v.pageUrl}`"
                >{{ v.title }}</el-menu-item>
              </el-submenu>
              <el-menu-item :index="`${item.pageUrl}`" v-else>{{ item.title }}</el-menu-item>
            </el-menu>
          </li>
        </ul>
        <!-- 城市选择组件 -->
        <selectCity v-show="visible" @isVisible="fn" @cityItem="fn1" />
      </div>

      <div class="mindWidth_R">
        <ul>
          <li @click="hanldeClick" class="changeHanld">
            <img src="../../static/image/vip/nav-vip-4.png" alt />
          </li>
          <li v-if="!isLogin" class="changeHanld" @click="showLogin">登录</li>
          <li class="changeHanld" v-if="!isLogin" @click="$router.push('/register')">免费注册</li>
          <li v-show="isLogin" class="userInfoName changeHanld">
            <el-dropdown trigger="hover">
              <div class="userbox">
                <img v-if="userInfo && userInfo.avatar" :src="getUserHeadPortrait(userInfo.avatar)" />
                <span class="singlerows" v-if="userInfo && userInfo.nickName">
                  {{
                  userInfo.nickName.length > 10
                  ? userInfo.nickName.substr(0, 10) + "..."
                  : userInfo.nickName
                  }}
                </span>
              </div>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click.native="goVIP" v-show="isLogin">会员中心</el-dropdown-item>
                  <el-dropdown-item @click.native="hanldErevent">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </li>
        </ul>
      </div>
    </div>

    <!-- 登录弹窗 -->
    <login-dialog ref="login" @reload="reload"></login-dialog>
  </div>
</template>

<script>
import { home, commonRequest, imgBaseUrl, postRequest } from "../api/api.js"; // 数据请求接口
import { defineComponent, ref } from "vue";
import { mapActions, mapMutations } from "vuex";
import selectCity from "../components/home_modules/selectCity.vue"; // 城市选择框
import loginDialog from "../components/login_item/LoginDialog";
import {
  sessionDeposit,
  sessionTake,
  getToken,
  removeToken
} from "../util/validate.js";
import baiduData from "@/static/baiduSq.json";

export default {
  components: {
    selectCity,
    loginDialog
  },
  name: "headerNav",
  data() {
    return {
      visible: false, // 显示城市选择框
      showHandClass: true,
      count: 0,
      centerDiaogVisible: false, // 显示登录框
      cureentCity: "", // 定位的当前城市
      isLogin: false, // 验证用户是否登录
      userInfo: {},
      homeNavigationMenuInfo: [],
      srcUrl: "",
      province: "",
      city: ""
    };
  },
  head() {
    return {
      title: this.title,
      htmlAttrs: {
        lang: "en"
      },
      script: [
        {
          src: this.srcUrl
        }
      ]
    };
  },

  mounted() {
    this.getVisit();
    let url = window.location.host;
    baiduData.list.map((item, index) => {
      if (item.key === url) {
        this.srcUrl = item.value;
      }
    });

    if (!this.srcUrl) {
      this.srcUrl =
        "https://hm.baidu.com/hm.js?5d2db21b15eb503b2f7d64fe58eeb4d7";
    }

    this.getCityName();

    let nowTime = new Date().getTime();
    let endTime = localStorage.getItem("endTime");
    if ((endTime !== null && endTime < nowTime) || endTime == null) {
      this.isLogin = false;
      this.handleLogout();
      removeToken();
    } else {
      this.isLogin = true;
    }
    if (localStorage.getItem("userInfo") !== "undefined") {
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    }
    this.getHomeNavigationMenuInfo();
    this.getCityNameError();

    this.province = sessionTake("provinceName");
    this.city = sessionTake("cityName");
  },
  methods: {
    // 登录刷新当前页
    reload() {
      location.reload();
    },
    ...mapActions(["handleLogout", "getCityNameError", "handleLogout"]),
    ...mapMutations(["setHome"]),
    getUserHeadPortrait(url) {
      return url.indexOf("http") != -1 ? url : imgBaseUrl + url;
    },
    showModalBox() {
      commonRequest("/api/sys/depart/getSubInfo", {}).then(res => {
        if (res.result.province !== "" && res.result.city !== "") {
          // if (res.result.province === '' && res.result.city === '') {
          // sessionDeposit("cityName", '东莞市'); // 城市名
          // sessionDeposit("provinceName", '广东省'); // 省份名
          sessionDeposit("cityName", res.result.city); // 城市名
          sessionDeposit("provinceName", res.result.province); // 省份名
          this.$store.commit("setProvince", res.result.province);
          this.$store.commit("setCity", res.result.city);

          this.province = res.result.province;
          this.city = res.result.city;
        } else {
          this.visible = true;
        }
      });
    },
    getHomeNavigationMenuInfo() {
      commonRequest("/api/home/queryHomeNavigationMenuInfo", {}).then(res => {
        // let obj = {
        //   children: [],
        //   city: "",
        //   pageUrl: "/declareIndex",
        //   parentId: "1367294171249971201",
        //   province: "",
        //   title: "企业测评"
        // };
        // res[1].children.push(obj);
        this.homeNavigationMenuInfo = res;
      });
    },
    // 点击去到vip页面
    hanldeClick() {
      let route = this.$router.resolve({
        path: "pageVIP"
      });
      window.open("/pageVIP", "_blank");
    },
    goVIP() {
      console.log(222222222);
      let nowTime = new Date().getTime();
      let endTime = localStorage.getItem("endTime");
      if (endTime !== null && endTime > nowTime) {
        window.open("/VIP", "_blank");
      } else {
        // 登录失效
        this.$refs.login.open();
        removeToken();
      }
    },
    // 获取后台是否返回分站城市,如果没有则定位城市
    getCityName() {
      var that = this;
      commonRequest("/api/sys/depart/getSubInfo", {}).then(res => {
        if (res.result.province !== "" && res.result.city !== "") {
          // if (res.result.province === '' && res.result.city === '') {
          // sessionDeposit("cityName", '东莞市'); // 城市名
          // sessionDeposit("provinceName", '广东省'); // 省份名
          sessionDeposit("cityName", res.result.city); // 城市名
          sessionDeposit("provinceName", res.result.province); // 省份名
          this.$store.commit("setProvince", res.result.province);
          this.$store.commit("setCity", res.result.city);

          this.province = res.result.province;
          this.city = res.result.city;

          this.cureentCity = sessionTake("cityName").split("市")[0];
          this.setHome(true);
          this.showHandClass = false;
        } else {
          this.showHandClass = true;
          this.setHome(true);
        }

        let cityName = sessionTake("cityName");
        if (cityName != null) {
          that.cureentCity = cityName.split("市")[0];
        } else {
          this.getAddress();
        }
      });
    },
    getAddress() {
      commonRequest("/api/tencent/getByIpGetLocation").then(res => {
        if (res.status === 0) {
          this.cureentCity = res.city.split("市")[0];
          sessionDeposit("cityName", res.city); // 城市名
          sessionDeposit("provinceName", res.province); // 省份名
          this.$store.commit("setProvince", res.province);
          this.$store.commit("setCity", res.city);

          this.province = res.province;
          this.city = res.city;
          this.setHome(true);
        } else {
          this.$message({
            type: "warning",
            message: "定位失败，请刷新重试"
          });
        }
      });
    },
    // 访问记录添加
    getVisit() {
      postRequest(
        "/api/home/addVisitorRecord?pageUrl=" + this.$route.path
      ).then(res => {});
    },
    // 定位选择框传送过来的值
    fn1(val) {
      this.cureentCity = val.cityName.split("市")[0];
    },
    // 隐藏定位选择框
    fn(val) {
      this.visible = val;
    },
    showLogin() {
      this.$router.push("/login");
    },
    // 点击退出登录
    hanldErevent() {
      this.$confirm("是否退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.handleLogout();
        // localStorage.removeItem("saasToken");
        // localStorage.removeItem("userInfo");
        // localStorage.removeItem("endTime");
        this.isLogin = false;
        this.$message({
          type: "success",
          message: "成功退出登录"
        });
      });
    },
    handleSelect(key, keyPath) {},
    // 是否显示登陆框
    isControlShow() {
      this.centerDiaogVisible = false;
    }
  }
};
</script>
<style scoped lang="less">
/deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border: none;
  color: #fff;
  font-size: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  margin: 0 -8px;
}

/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 16px;
  margin: 0 -10px;
}

.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: none;
}

/deep/ .el-menu-item {
  background-color: #fff;
  display: flex;
  justify-content: center;
}

.el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
  color: #44a2ff !important;
}

/deep/ .el-menu.el-menu--horizontal {
  border: none;
}

/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title {
  font-size: 16px;
}

.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
  background: #fff !important;
  color: #000 !important;
  font-size: 16px;
}

/deep/ .el-menu--horizontal ul {
  padding: 0;
}

.el-menu--horizontal .el-menu-item:not(.is-desabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  &:last-child {
    margin: 0 !important;
  }
}

/deep/ .el-menu--collapse.el-menu.el-submenu,
.el-menu--popup {
  min-width: 80px;
}

/deep/ .el-submenu__title:hover {
  background-color: transparent;
}

/deep/ .el-menu.el-menu--horizontal {
  color: #fff;
}

/deep/ .el-menu--horizontal > .el-menu-item.is-active {
  border: 0 none;
  color: #fff;
}

.wrapper {
  position: relative;
  z-index: 999;
  background-color: #fff;
  max-width: 1920px;
  margin: 0 auto;
  box-shadow: #00234b 0px -10px 16px;
}

@media (min-width: 1200px) {
  width: 1200px;
}

@media (min-width: 992px) {
  width: 970px;
}

@media (min-width: 768px) {
  width: 750px;
}

.wrapper_main {
  // background-color: rgba(0, 0, 0, 0.2);
  color: #000;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .mindWidth_L,
  .mindWidth_R {
    height: 100%;

    ul {
      display: flex;
      align-items: center;
      height: 100%;

      li {
        height: 100%;
        width: 120px;
        font-size: 16px;
        display: flex;
        align-items: center;

        .location {
          width: 100px;
          display: flex;
          justify-content: center;
          font-size: 16px;
        }

        &:last-child {
          ul.menuBar {
            & {
              li.el-menu-item.is-active {
                color: #fff !important;
              }
            }
          }
        }

        // justify-content: center;
        .huiyuan {
          width: 10px;
          height: 10px;
          margin-right: 8px;
        }

        .login {
          width: 97px;
          height: 42px;
        }

        i {
          color: #feae0f;
          font-size: 18px;
          margin-right: 10px;
        }
      }
    }
  }

  .mindWidth_L {
    width: 520px;
    position: relative;
  }

  .mindWidth_R {
    display: flex;
    justify-content: flex-end;

    ul {
      li {
        width: 98px;
        display: flex;
        justify-content: center;
      }
    }

    .userInfoName {
      .userbox {
        width: 100px;
        display: flex;
        align-items: center;

        &:focus {
          outline: none;
        }
      }

      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }

      span {
        margin-left: 10px;
        // width: 70px;
        font-size: 18px;
        color: #000;
      }
    }
  }
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 16px;
}

/deep/ .el-dropdown {
  display: flex;
  align-items: center;
}

/deep/ .el-menu--collapse.el-menu.el-submenu,
.el-menu--popup {
  width: 80px;
  text-align: center;
}
</style>
